<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<th:block th:include="include :: header('爬虫列表')"/>
	</head>
	<body>
		<div style="height: 15px;padding: 15px;background-color: #fff;">
			<span class="layui-breadcrumb">
				<a href="#">爬虫管理</a>
				<a><cite>爬虫列表</cite></a>
			</span>
		</div>
		<div style="padding: 20px;background-color: #f2f2f2;">
			<div class="layui-row layui-col-space13">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header">爬虫配置信息列表</div>
						<div class="layui-card-body">
							<table id="spiderTable" lay-filter="spiderTable"></table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script id="tool" type="text/html">
			<a  lay-event="editSpider" class="layui-btn layui-btn-xs">
				<i class="layui-icon layui-icon-edit"></i>
			</a>
			<a lay-event="delSpider" class="layui-btn layui-btn-xs layui-btn-danger">
				<i class="layui-icon layui-icon-delete"></i>
			</a>
		</script>
		<script id="toolbar" type="text/html">
			<div class="layui-btn-container">
				<a lay-event="addSpider" class="layui-btn layui-btn-sm layui-btn-normal">
					<i class="layui-icon layui-icon-addition"></i>新增爬虫配置
				</a>
			</div>
		</script>
		<script id="isUse" type="text/html">
			<input type="checkbox" disabled name="isUse" value="{{d.isUse}}" lay-skin="switch"
			lay-text="启用|未启用" lay-filter="isUse" {{d.isUse == '0'?"checked":""}} >
		</script>
		<th:block th:include="include :: footer"/>
		<script>
			var layer,$;
			layui.use(['element','table','layer'],function(){
				var element = layui.element,table = layui.table;
				layer = layui.layer;
				$ = layui.jquery;
				table.render({
					elem: '#spiderTable',
					toolbar:'#toolbar',
					defaultToolbar:[],
					cols: [
							[
						{type:'radio'},
						{type:'numbers'},
						{field:'spiderName',title:'爬虫名字',width:150},
						{field:'cron',title:'cron表达式',width:280},
						{field:'uri',title:'爬取地址',width:250},
						{field:'count',title:'爬取次数',width:120},
						{field:'createTime',title:'创建时间',width:150},
						{field:'isUse',title:'是否启用',width:150,templet:'#isUse'},
						{fixed:'right',title:'操作',width:150,toolbar:'#tool',align:'center'}
					]
					],
					url:'/sc/find',
					height:'full-170',
					page:true
				});

				//表格头部工具条监听
				table.on('toolbar(spiderTable)',function(obj){
					var event = obj.event;
					switch(event){
						case 'addSpider':
							layer.open({
								type:2,
								title:'新增爬虫信息',
								content:'/sc/addPage',
								area:['900px','100%']
							});
						break;
					}
				});
				//表格行工具条监听
				table.on('tool(spiderTable)',function(obj){
					var event = obj.event;
					var id = obj.data.id;
					switch(event){
						case 'editSpider':
							layer.open({
								type:2,
								title:'编辑爬虫信息',
								content:'/sc/editPage/'+id,
								area:['900px','100%'],
								offset:['0px','100px'],
								id:'editSpider'
							});
							break;
						case 'delSpider':
							layer.confirm('确定要删除该条信息?',{icon:3,title:'系统警告'},function(i) {
								$.ajax({
									type:'get',
									url:'/sc/remove/'+id,
									dataType:'json',
									success:function (result) {
										layer.msg(result.msg);
										obj.del();
									}
								})
							});
							break;
					}
				});

			});

			function openDialog(result){
				var table = $('#dialogTable table');
				var tr = "<tr><th>&nbsp;</th>";
				var tbr = "";
				var l = 0,c=0;//l->行 c—>列
				$.each(result,function (key,value) {
					c++;
					tr += '<th>'+ key + '</th>';
					l = value.length;
				});
				tr += '</tr>';
				$(table).find('thead').html(tr);

				//生成空白行空白列
				for(var i=0;i<l;i++){
					tbr += "<tr><td>&nbsp;</td>";
					for(var j=0;j<c;j++){
						tbr += '<td>&nbsp;</td>'
					}
					tbr += "</tr>";
				}
				$(table).find('tbody').html(tbr);

				//获取空白行
				var trs = $(table).find('tbody tr');
				$.each(trs,function (x,tr) {
					//获取每一行的表格
					var tds = $(tr).find('td');
					var y = 0;
					$(tds[y]).html(x+1);
					$.each(result,function (key,value) { //key=电影内容  value=[a,b]
						y++;
						value = value[x];
						value = value.length>30?value.substr(0,30)+"...":value;
						$(tds[y]).html(value);//给每一行的每一个表格赋值

					})
				})

				layer.open({
					type:1,
					title:'弹出层',
					content:$('#dialogTable').html(),
					area:['450px','80%'],
					offset:['0px','900px'],
					shade:0,
					id:'dialog',
					maxmin:true
				});
			}
		</script>
		<div id="dialogTable" class="layui-container" style="display: none">
			<table class="layui-table" lay-size="sm">
				<thead>

				</thead>
				<tbody>

				</tbody>
			</table>
		</div>
	</body>
</html>
